<script setup lang="ts">
const props = defineProps<{
  selectedIndex: number
}>()

defineEmits(['select'])
</script>

<template>
  <view class="flex justify-between items-start">
    <view class="relative flex flex-col items-center w-210rpx h-143rpx" @tap="$emit('select', 0)">
      <image v-if="props.selectedIndex === 0" class="absolute top-0 left-0 w-210rpx h-143rpx" src="@/static/images/home/design-cases-bg.png" />
      <view v-else class="absolute top-0 left-0 w-210rpx h-130rpx bg-white rounded-20rpx" :style="{ boxShadow: '0rpx 5rpx 20rpx 0rpx rgba(255, 109, 10, 0.05)' }" />
      <Spacer height="22" />
      <image v-if="props.selectedIndex === 0" class="relative w-48rpx h-48rpx" src="@/static/images/home/design-cases-0_0.png" />
      <image v-else class="relative w-48rpx h-48rpx" src="@/static/images/home/design-cases-0_1.png" />
      <Spacer height="15" />
      <view class="relative text-28rpx leading-28rpx" :class="[props.selectedIndex === 0 ? 'text-white' : 'text-secondary']">
        出租房简装
      </view>
    </view>
    <view class="relative flex flex-col items-center w-210rpx h-143rpx" @tap="$emit('select', 1)">
      <image v-if="props.selectedIndex === 1" class="absolute top-0 left-0 w-210rpx h-143rpx" src="@/static/images/home/design-cases-bg.png" />
      <view v-else class="absolute top-0 left-0 w-210rpx h-130rpx bg-white rounded-20rpx" :style="{ boxShadow: '0rpx 5rpx 20rpx 0rpx rgba(255, 109, 10, 0.05)' }" />
      <Spacer height="22" />
      <image v-if="props.selectedIndex === 1" class="relative w-48rpx h-48rpx" src="@/static/images/home/design-cases-1_0.png" />
      <image v-else class="relative w-48rpx h-48rpx" src="@/static/images/home/design-cases-1_1.png" />
      <Spacer height="15" />
      <view class="relative text-28rpx leading-28rpx" :class="[props.selectedIndex === 1 ? 'text-white' : 'text-secondary']">
        家庭简装
      </view>
    </view>
    <view class="relative flex flex-col items-center w-210rpx h-143rpx" @tap="$emit('select', 2)">
      <image v-if="props.selectedIndex === 2" class="absolute top-0 left-0 w-210rpx h-143rpx" src="@/static/images/home/design-cases-bg.png" />
      <view v-else class="absolute top-0 left-0 w-210rpx h-130rpx bg-white rounded-20rpx" :style="{ boxShadow: '0rpx 5rpx 20rpx 0rpx rgba(255, 109, 10, 0.05)' }" />
      <Spacer height="22" />
      <image v-if="props.selectedIndex === 2" class="relative w-48rpx h-48rpx" src="@/static/images/home/design-cases-2_0.png" />
      <image v-else class="relative w-48rpx h-48rpx" src="@/static/images/home/design-cases-2_1.png" />
      <Spacer height="15" />
      <view class="relative text-28rpx leading-28rpx" :class="[props.selectedIndex === 2 ? 'text-white' : 'text-secondary']">
        精装
      </view>
    </view>
  </view>
</template>
